import React from 'react';
import { Select } from 'antd';
// import { Select, Divider, Icon } from 'antd';

const Selector = ({ options, value, id, onChange, ...rest }) => (
    // const [inputValue, setInputValue] = React.useState('');
    // const addItem = () => {
    //     if (inputValue) {
    //         onChange({ id, val: inputValue });
    //     }
    // };
    // const appendBtn = (
    //     <>
    //         <Divider style={{ margin: '4px 0' }} />
    //         <div
    //             style={{ padding: '4px 8px', cursor: 'pointer' }}
    //             onMouseDown={e => e.preventDefault()}
    //             onClick={addItem}
    //         >
    //             <Icon type="plus" /> 新增维度
    //         </div>
    //     </>
    // );

    <Select
        showSearch
        placeholder="请输入关键字匹配"
        style={{ width: 240 }}
        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        // onSearch={text => {
        //     setInputValue(text);
        // }}
        onChange={val => onChange({ id, val })}
        dropdownRender={menu => (
            <div>
                {menu}
                {/* {appendBtn} */}
            </div>
        )}
        value={value}
        {...rest}
    >
        {options.map(item => (
            <Select.Option key={item.value}>{item.label}</Select.Option>
        ))}
    </Select>
);
export default Selector;
